<template>
  <Portlet title="物流节点">
    <div style="position: relative;margin-bottom: 20px;">
      <div style="position: absolute; left: 7px; top: 25px; bottom: 15px; border-left: 1px dashed #c2cad8;"></div>
      <table class="table table-list-circle show-table" style="position: relative;">
        <tbody>
        <tr v-for="(node, index) in fhbOrderNodes" :key="index">
          <td width="150px" style="vertical-align: top;">
            <i class="fa bg-white font-blue" :class="{'fa-circle-o': index + 1 != fhbOrderNodes.length, 'fa-circle': index + 1 == fhbOrderNodes.length}"></i>
            <span style="display: inline-block; margin-left: 10px;">{{ node.foundtime|unixTimestampFilter }}</span>
          </td>
          <td>
            <div v-for="(item, index) in matchImageArr(node.memo)" :key="index">
              {{ item.text }}
              <upload-image v-if="item.imageStr" :value="getImage(item.imageStr)" :readonly="true"></upload-image>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </Portlet>
</template>
<script>
import {unixTimestampFilter, matchImageArr} from '@/filters'
import {dotData, getImage} from '@/utils'
export default {
  name: 'serviceLog',
  components: {
  },
  filters: {
    unixTimestampFilter
  },
  props: {
    orderDetail: {
      type: Object,
      required: true
    }
  },
  computed: {
    fhbOrderNodes() {
      return dotData(this.orderDetail, 'fhbOrderNodes') || []
    }
  },
  methods: {
    matchImageArr,
    getImage
  }
}
</script>
